<!--  -->
<template>
  <div class="container">
    <div>
      <img src="@/assets/notice.png" alt="" />
      <div class="title">通知公告</div>
      <div
        class="more"
        @click="
          () => {
            $emit('more', 'notice');
          }
        "
      >
        了解更多
      </div>
      <div
        class="sub_title"
        v-for="(notice, index) in noticeListCopy"
        :key="index"
        @click="toDetail(notice)"
      >
        <a-tooltip placement="topLeft" :title="notice.title">
          <span>{{ notice.title }}</span>
        </a-tooltip>
        <span>{{ notice.createTime }}</span>
      </div>
    </div>
    <div>
      <img src="@/assets/materials.png" alt="" />
      <div class="title">材料示范</div>
      <div
        class="more"
        @click="
          () => {
            $emit('more', 'materials');
          }
        "
      >
        了解更多
      </div>
      <div
        class="sub_title"
        v-for="(file, index) in fileList.slice(0, 3)"
        @click="showDetail(file, '材料示范')"
      >
        <a-tooltip placement="topLeft" :title="file.title">
          <span>{{ file.title }}</span>
        </a-tooltip>
        <span>{{ file.createTime }}</span>
      </div>
    </div>
    <div class="type message">
      <img src="@/assets/result.png" alt="" />
      <div class="title">评审结果</div>
      <div
        class="more"
        @click="
          () => {
            $emit('more', 'result');
          }
        "
      >
        了解更多
      </div>
      <div
        class="sub_title"
        v-for="(result, index) in resultList.slice(0, 3)"
        @click="showDetail(result, '评审结果')"
      >
        <a-tooltip placement="topLeft" :title="result.title">
          <span>{{ result.title }}</span>
        </a-tooltip>
        <span>{{ result.createTime }}</span>
      </div>
    </div>
    <a-modal
      v-model="resultVisible"
      :title="title"
      :body-style="{ padding: '24px 40px 20px 20px' }"
      :width="1000"
      centered
      :footer="null"
    >
      <div class="box">
        <div class="img" v-if="info.image">
          <img :src="info.image" alt="" />
        </div>
        <div class="title">{{ info.title }}</div>
        <a-divider />
        <div v-if="fileType === 'docx'" class="file_container" ref="file"></div>
        <pdf
          v-else-if="fileType === 'pdf'"
          :src="pdfUrl"
          style="width: 100%"
          ref="pdf"
          v-for="i in numPages"
          :key="i"
          :page="i"
        />
        <a-divider />
        <div
          class="file-list"
          v-if="info.notificationFileList && info.notificationFileList.length"
        >
          <div class="file-list-title">参考文件</div>
          <div
            class="file"
            v-for="item in info.notificationFileList"
            :key="item.id"
          >
            <!-- <a :href="item.url" :download="item.original">{{
              item.original
            }}</a> -->
            <div
              @click="handleUpload(item)"
              style="color: #1890ff; cursor: pointer"
            >
              {{ item.original }}
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getMessageList, readMessage } from "@/api/home";
import { pageList } from "@/api";
import axios from "axios";
const docx = require("docx-preview");
import pdf from "vue-pdf";
export default {
  data() {
    return {
      messageList: [],
      timer: null,
      noticeList: [],
      noticeListCopy: [],
      fileList: [],
      resultList: [],
      resultVisible: false,
      info: {},
      title: "",
      fileType: "",
      numPages: null,
    };
  },
  mounted() {
    /**
     * 有token的时候再进行接口获取数据
     * to范哥
     */
    if (this.$storejs.get("token")) {
      // this.getMessageList();
      // this.timer = setInterval(() => {
      //   this.getMessageList();
      // }, 30000);
      pageList({ type: 1 }).then((res) => {
        // console.log(res);
        this.noticeList = res.data.records;
        if (this.noticeList.length)
          this.noticeListCopy = this.noticeList.slice(0, 1);
      });
      pageList({ type: 2 }).then((res) => {
        this.fileList = res.data.records;
      });
      pageList({ type: 3 }).then((res) => {
        this.resultList = res.data.records;
      });
    }
  },
  // beforeDestroy() {
  //   clearTimeout(this.timer);
  // },
  methods: {
    // toDeatail(data, title) {
    //   console.log(data);
    //   this.info = data;
    //   this.title = title;
    //   this.resultVisible = true;
    //   readMessage(data.id).then((res) => {
    //     // console.log(res)
    //     this.getMessageList();
    //   });
    // },
    showDetail(e, title) {
      const _ts = this;
      _ts.info = e;
      _ts.title = title;
      _ts.resultVisible = true;
      readMessage(e.id).then((res) => {
        // console.log(res)
        this.getMessageList();
      });
      const info = e.detail;
      if (info && info.url) {
        if (info.original.split(".")[1] === "pdf") {
          _ts.fileType = "pdf";
          _ts.pdfUrl = pdf.createLoadingTask(info.url);
          _ts.pdfUrl.promise
            .then((pdf) => {
              _ts.numPages = pdf.numPages;
              console.log(_ts.numPages);
            })
            .catch((err) => {
              console.error("pdf 加载失败", err);
            });
        } else {
          _ts.fileType = "docx";
          axios({
            method: "get",
            responseType: "blob", // 设置响应文件格式
            url: info.url,
          }).then(({ data }) => {
            docx.renderAsync(data, _ts.$refs.file); // 渲染到页面预览
          });
        }
      }
    },
    getMessageList() {
      getMessageList({ isRead: 0 }).then((res) => {
        // console.log(res);
        this.messageList = res.data;
      });
    },
    goList(e) {
      // e.preventDefault();
      this.$router.push("/message");
    },
    toDetail(data) {
      // console.log(window.location.href);
      const url = window.location.href.slice(
        0,
        window.location.href.indexOf("#")
      );
      window.open(url + `#/messageDetail?id=${data.id}`, "_blank");
    },
    handleUpload(data) {
      axios
        .get(data.url, {
          responseType: "blob", // 注意返回数据类型
        })
        .then((res) => {
          const url = window.URL.createObjectURL(res.data);
          const linkElement = document.createElement("a"); // 创建点击下载的元素
          linkElement.setAttribute("href", url);
          linkElement.setAttribute("downLoad", data.original);
          linkElement.click();
        });
    },
  },
  components: { pdf },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  & > div:nth-child(n + 2) {
    margin-left: 78px;
  }
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(122, 122, 122, 0.25);
    border-radius: 10px;
    padding: 58px 0 34px;
    width: 25vw;

    img {
      width: 90px;
      height: 90px;
    }
    .title {
      font-size: 26px;
      color: #040448;
      line-height: 85px;
    }
    .more {
      position: relative;
      display: flex;
      justify-content: center;
      cursor: pointer;
      width: 134px;
      height: 38px;
      line-height: 38px;
      // text-align: center;
      background: #ffffff;
      border: 1px solid #006cff;
      border-radius: 8px;
      color: #0084fe;
      margin-bottom: 24px;
      & > div {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
        transform: translate(50%, -50%);
      }
    }
    .sub_title {
      cursor: pointer;
      margin-top: 10px;
      color: #151515;
      display: flex;
      align-items: center;
      span:first-child {
        text-align: right;
        width: 60px;
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 10px;
      }
    }
  }
}
.message {
  position: relative;
  .new_message {
    color: #333;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    position: absolute;
    top: 20px;
    left: 0;
  }
}
.box {
  .img {
    overflow: hidden;
    img {
      width: 100%;
      float: left;
    }
  }
  .title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-top: 24px;
  }
  .text {
    font-size: 14px;
    color: #444;
  }
  .file-list {
    .file-list-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 12px;
    }
    .file {
      font-size: 14px;
      a {
        color: #1890ff;
      }
    }
  }
}
</style>
